<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		 <script src="${ctxStatic }/laydate/laydate.js"></script>
		 <meta name="decorator" content="center_common" />
		 
		 <script>
	$(function(){
		//设为默认
		$(".default_box").click(function(){
			if ($(this).parent().find("i").hasClass("search_chose_hover")) {
				$(this).parent().find("i").removeClass("search_chose_hover");
				$("input[name='isDef']").val("0");
			} else{
				$(this).parent().find("i").addClass("search_chose_hover");
				$("input[name='isDef']").val("1");
			}
			var Inputindex=$('.parts_search_list').index($(this));
			$(".numRadio").find('input').eq(Inputindex).click();
		});
		
		//弹框
		$(".add_address").click(function(){
			var listSize=$("#listSize").val();
			if(listSize<11){
			$("#receive").val("");
			$("#phone").val("");
			$("#address").val("");
			$("#addrId").val("");
			$("#province").val("");
			$("#city").find("option").remove();
			var ci="<option value=''>市</option>";
			$("#city").append(ci); 
			
			$("#area").find("option").remove();
			var ci="<option value=''>区</option>";
			$("#area").append(ci); 
			$("#isDef").val("0");
			$(".search_chose").removeClass("search_chose_hover");
			$("#proment_new_address").show();
			}else{
			   	$(".listSize").show();
			    setTimeout(function(){
			    	$(".listSize").hide();
			    	
			    }, 2000); 
			}
		});
		
		$(".close_page").click(function(){
			$("#proment_new_address").hide();
		});

		var that
		$(".js_del").click(function(){
			$("#del_tk").show();
			that=$(this).parents("tr");
	
		});
		
		$('.cancle').on('click',function(){
	        $("#del_tk").hide();
	   });
	   $('.submit').on('click',function(){
	        $("#del_tk").hide();
	         that.remove();
	    })
		//设默认地址
		$(".js_set").click(function(){
			$(this).parents(".table").find(".js_set").removeClass("col_gry ");
			$(this).parents(".table").find(".our_bd").removeClass("our_adress_item ");
			$(this).addClass("col_gry ");
			$(this).parents(".table tr").find(".our_bd").addClass("our_adress_item ");
		});	   
	})
	
	
	function sheZhi(v){
	       
		window.location.href="${ctxWeb}/myAddress/shePhoneAddress?id="+v
			
	  }
	
	function deleteShow(v){
		$("#addressId").val(v);
	}
	
	function confirmDelete(){
		var id=$("#addressId").val();
		window.location.href="${ctxWeb}/myAddress/deletePhoneAddress?id="+id
	}
	
	function cityList(){
		var id=$("#province").val();
		$.ajax({
			type:"post",
			url: "${ctxWeb}/myAddress/cityList",
			data:{"id":id},
		    dataType:"json",
		    success:function(data){
		    	if(data!=null){
	            var data=data;
	            $("#city").empty();
		    	$(data).each(function(k,v){
		    		var $option = $("<option>").attr({
                        "value" : v.id
                    }).text(v.name);
		    		
                    $("#city").append($option);
                    $("#city").change();
		    	})
		    		
		    	}
		    }
		})
	}
	
	
	function areaList(){
		var cityId=$("#city").val();
		$.ajax({
			type:"post",
			url: "${ctxWeb}/myAddress/areaList",
			data:{"id":cityId},
		    dataType:"json",
		    success:function(data){
		    	if(data!=null){
	            var data=data;
	            $("#area").empty();
		    	$(data).each(function(k,v){
		    		
		    		var $option = $("<option>").attr({
                        "value" : v.id
                    }).text(v.name);
		    		
                    $("#area").append($option);
                    $("#area").change();
		    	})
		    		
		    	}
		    }
		})
	}
	
	function subt(){
		var receive=$.trim($("#receive").val());
		var phone=$.trim($("#phone").val());
		var address=$.trim($("#address").val());
		if(receive.length<1){
			$("#receSpan").text("不能为空");
			return false;
		}else{
			$("#receSpan").text("");
		}
		if(phone.length<1){
			$("#phoneSpan").text("不能为空");
			return false;
		}else{
			$("#phoneSpan").text("");
		}
		if(!(/^1[34578]\d{9}$/.test(phone))){
			$("#phoneSpan").text("格式不正确");
			return false;
		}else{
			$("#phoneSpan").text("");
		}
		     
		if(address.length<1){
			$("#addressSpan").text("不能为空");
			return false;
		}else{
			$("#addressSpan").text("");
		}
		
		$("#forms").submit();
	}
	
	
	function showEdit(v){
		$.ajax({
			type:"post",
			url: "${ctxWeb}/myAddress/showAddressDetail",
			data:{"id":v},
		    dataType:"json",
			success:function(st){
            
				if(st!=null && st!=''){
					$("#receive").val(st.receive);
					$("#phone").val(st.phone);
					$("#address").val(st.address);
					$("#province").val(st.province);
					$("#city").val(st.city);
					$("#area").val(st.area);
					$("#isDef").val(st.isDef);
					$("#addrId").val(st.id);
					$ ("select [id='province'] option" ). each( function () {  
					    if($(this).val()==st.province){  
					    $(this).attr("selected","selected");   
					    return false;          
					}                                   
					})  
					cityList();
					$ ("select [id='city'] option" ). each( function () {  
					    if($(this).val()==st.city){  
					    $(this).attr("selected","selected");   
					    return false;          
					}                                   
					})  
					areaList()
					$ ("select [id='area'] option" ). each( function () {  
					    if($(this).val()==st.area){  
					    $(this).attr("selected","selected");   
					    return false;          
					}                                   
					})  
					
					if(st.isDef==1){
						
						$(".search_chose").addClass("search_chose_hover");
					}else{
						$(".search_chose").removeClass("search_chose_hover");
					}
				}
				
			}
		})
		
		$("#proment_new_address").show();
	}
	
	
	$(function(){
		var scrollLock=0;
		var p=2;
		$(window).scroll(function() {    
	     if ($(this).scrollTop() + window.innerHeight + 20 >= $(document).height() && $(this).scrollTop() >20) {
			  $("#loadingTips").show(); 
			  if(scrollLock==0){
				  scrollLock=1;
				  $.post("${ctxWeb}/myAddress/addrPhoneList",{"p":p},function(e){
						if(e.length<1182){
							$("#loadingTips").text("已无更多数据")
						}else{
							$(".our_adress_table").find('tbody').append(e);
							$(".js_del").unbind();
							$(".js_del").click(function(){
								$("#del_tk").show();
								that=$(this).parents("tr");
						
							});
							scrollLock=0;
							p = p+1;
						}
				  });
			 }
	      }  
	  }); 
	}) 
    </script>
	</head>
	<body>
	<input value="${listSize}" id="listSize" type="hidden">
	<input id="addressId" name="id" type="hidden"/>
		<!--头部-->
	<!-- <header>
		<div class="topnav">
			<div class="topnav_list">
				<ul class="clearfix topnav_list_right">
					<li class="item_one">
						<a href="javascript:void(0);">
							<i class="index_Qorder"></i>
							<span>快速下单</span>
						</a>
					</li>
					<li class="item_two">
						<a href="javascript:void(0);">
							<i class="index_order"></i>
							<span>订单管理</span>
						</a>
					</li>
					<li class="item_three">
						<a href="javascript:void(0);">
							<i class="index_person"></i>
							<span>用户中心</span>
							<img src="images/drap_trangle.png" alt="" />
							<div class="drap_down">
								<p>用户中心</p>
								<p>用户中心</p>
							</div>
						</a>
					</li>
					<li class="item_four">
						<a href="javascript:void(0);">
							<i class="index_help"></i>
							<span>帮助中心</span>
						</a>
					</li>
				</ul>
				登陆信息
				<div class="welcom">
					欢迎,fan357896000
					<a href="#"> [退出]</a>
					<a href="#"> [升级]</a>
				</div>
				登陆信息结束
			</div>
		</div>
	</header>
	头部结束
	导航
	<nav class="navbar navbar-default jp_nav pc_nav_box" role="navigation">
		<div class="container-fluid"> 
			<div class="navbar-header">
				<button type="button" class="navbar-toggle " data-toggle="collapse"
						data-target="#example-navbar-collapse">
					<span class="sr-only">切换导航</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				手机端logo
				<a class="nav_logo_phone col-xs-4" href="javascript:void(0)">
					<img src="images/phone_logo.png" alt="" />
				</a>
				手机端logo结束
				pc端logo
				<a href="javascript:void(0)" class="pc_nav_head  on_bg">
					<img src="images/pc_logo.png" alt="" />
				</a>
				pc端logo结束
				手机端中间
				<div class="phone_mid col-xs-6">
					<figure class="col-xs-4">
						<a href="javascript:void(0)">
							<img src="images/person_ph.png" alt="" />
						</a>
					</figure>
					<figure class="col-xs-4">
						<a href="javascript:void(0)" class="js_search">
							<img src="images/black_search.png" alt="" />
						</a>
					</figure>
					<figure class="col-xs-4">
						<a href="javascript:void(0)">
							<img src="images/shop_car_ph.png" alt="" />
						</a>
						<p class="num_shop"></p>
					</figure>
				</div>
				手机端中间结束
				手机端搜索框
				<div class="tk_search">
					<div class="jd_win" id="promt"></div>
					<div class="drap_search_box ">
						<i></i>
						<div class="drap_search_center clearfix">
							<label class="col-xs-10">
								<input type="text" placeholder="请输入商品名或VIN编码" class="form-control">
							</label>
							<span class="col-xs-2">
								<a href="javascript:void(0)" class="phone_search_btn"></a>
							</span>
						</div>
					</div>
				</div>
				手机端搜索框结束
			</div>
			<div class="pc_shop_car">
				<a href="javascript:void(0)">
					<img src="images/shop_car.png" alt="" />
					<span>购物车</span>
				</a>
				<p class="num_shop">02</p>
			</div>
			<div class="collapse navbar-collapse" id="example-navbar-collapse">
				<ul class="nav navbar-nav pc_nav_list">
					<li><a href="#">配件商城</a></li>
					<li><a href="#">配件目录</a></li>
					<li><a href="#">新闻公告</a></li>
					<li class="dropdown">
	                    <a href="#">全部分类</a>
	                    <ul class="sub-menu">
	                        <li><a href="#">Nav 3.4.1</a></li>
	                        <li class="dropdown">
	                            <a href="#">Nav 3.4.2<i class="fa fa-chevron-circle-right"></i></a>
	                            <ul class="sub-menu">
	                                <li><a href="#">Nav 3.4.2.1</a></li>
	                                <li><a href="#">Nav 3.4.2.2</a></li>
	                                <li><a href="#">Nav 3.4.2.3</a></li>
	                                <li><a href="#">Nav 3.4.2.4</a></li>
	                                <li><a href="#">Nav 3.4.2.5</a></li>
	                            </ul>
	                        </li>
	                        <li class="dropdown">
	                        	<a href="#">Nav 3.4.3<i class="fa fa-chevron-circle-right"></i></a>
	                        	<ul class="sub-menu">
	                                <li><a href="#">Nav 3.4.2.1</a></li>
	                                <li class="dropdown">
	                                	<a href="#">Nav 3.4.2.2<i class="fa fa-chevron-circle-right"></i></a>
	                                	<ul class="sub-menu">
			                                <li><a href="#">Nav 3.4.2.1.1</a></li>
			                                <li><a href="#">Nav 3.4.2.2.2</a></li>
			                                <li><a href="#">Nav 3.4.2.3.3</a></li>
			                                <li><a href="#">Nav 3.4.2.4.4</a></li>
			                                <li><a href="#">Nav 3.4.2.5.5</a></li>
			                            </ul>
	                                </li>
	                                <li><a href="#">Nav 3.4.2.3</a></li>
	                                <li><a href="#">Nav 3.4.2.4</a></li>
	                                <li><a href="#">Nav 3.4.2.5</a></li>
	                            </ul>
	                        </li>
	                        <li><a href="#">Nav 3.4.4</a></li>
	                        <li><a href="#">Nav 3.4.5</a></li>
	                    </ul>
	                </li>
				</ul>
			</div>
			
		</div>
	</nav> -->
	<!--导航结束-->
	<!--4line-->
	<!-- <div class="four_line"></div> -->
	<!--4line结束-->
	<!--主题内容-->
	<div class="parts_main_box bgf5">
		<div class="container">
			<div class="row">
				<!-- pc 订单管理 -->
				<div class="Credit_box clearfix">
					<!-- 左边部分 -->
					<%-- <div class="col-sm-2 pad0">
						<div class="my-order">
							<ul>
								<li class="item ">
									<a href="javascript:void(0);">我的订单 </a>
								</li>
								<li class="item">
									<a href="javascript:void(0);">我的询价单 </a>
								</li>
								<li class="item">
									<a href="javascript:void(0);">退换货记录 </a>
								</li>
								<li class="item ">
									<a href="javascript:void(0);">我的信用额度 </a>
								</li>
								<li class="item ">
									<a href="javascript:void(0);">发票信息</a>
								</li>
								<li class="item curr">
									<a href="${ctxWeb}/myAddress/myAddressList">我的地址</a>
								</li>
								<li class="item">
									<a href="javascript:void(0);">企业信息</a>
								</li>
								<li class="item">
									<a href="javascript:void(0);">个人信息</a>
								</li>
							</ul>
							
						</div>
					</div> --%>
					<!-- 左边部分 end-->
					<!-- 右边部分 -->
					<div class="col-sm-10 pad20 pad_10">
						<div class="Credit_right">
							<!--我的地址-->
							<div class="goods_detail_info_box mar_16 clearfix">
								<h3>
									<span>全部地址</span>
									<a href="javascript:void(0)" class="add_address">+新增</a>
								</h3>
								<!--我的地址表格-->
								<div class="our_adress_box">
									<div class="our_adress_table  clearfix">
										<table class="table table-bordered">
										    <thead>
											    <tr>
											        <th>收件人</th>
											        <th>电话号码</th>
											        <th>省市区</th>
											        <th>详细地址</th>
											        <th>默认</th>
											        <th>操作</th>
											    </tr>
										    </thead>
										    <tbody>
										       
										       <c:forEach var="list" items="${list }">
											    <tr>
											       <c:if test="${list.isDef==0 }">
											        <td class="our_bd " id="rece">
											        	${list.receive }
											        </td>
											        </c:if>
											        
											        <c:if test="${list.isDef==1 }">
											        <td class="our_bd our_adress_item">
											        	${list.receive }
											        	<i></i>
											        </td>
											        </c:if>
											        
											        <td>${list.phone }</td>
											        <td>${list.provinceName }${list.cityName }${list.areaName }</td>
											        <td>${list.address}</td>
											        <c:if test="${list.isDef==0 }">
											        <td class="color_red  js_set " id="sheZhi" onclick="sheZhi(${list.id})">设置</td>
											        </c:if>
											        <c:if test="${list.isDef==1 }">
											        <td class="color_red  js_set col_gry " id="sheZhi" onclick="sheZhi(${list.id})">设置</td>
											        </c:if>
											        <td class="color_blue">
											        	<a href="javascript:void(0)" class="js_edit" onclick="showEdit(${list.id})">编辑</a>
											        	<a href="javascript:void(0)" class="js_del" onclick="deleteShow(${list.id})">删除</a>   
											        </td>
											    </tr>
											    </c:forEach>
											   
											   <!--  <tr>
											        <td class="our_bd">
											        	范范范
											        	<i></i>
											        </td>
											        <td>15101095085</td>
											        <td>湖北省 武汉市 武昌区</td>
											        <td>中南路中间广场b座1301</td>
											        <td class="color_red js_set">设置</td>
											        <td class="color_blue">
											        	<a href="javascript:void(0)" class="js_edit">编辑</a>
											        	<a href="javascript:void(0)" class="js_del">删除</a>   
											        </td>
											    </tr>
											    <tr>
											        <td class="our_bd">
											        	范范范
											        	<i></i>
											        </td>
											        <td>15101095085</td>
											        <td>湖北省 武汉市 武昌区</td>
											        <td>中南路中间广场b座1301</td>
											        <td class="color_red js_set">设置</td>
											        <td class="color_blue">
											        	<a href="javascript:void(0)" class="js_edit">编辑</a>
											        	<a href="javascript:void(0)" class="js_del">删除</a>   
											        </td>
											    </tr>
											    <tr>
											        <td class="our_bd">
											        	范范范
											        	<i></i>
											        </td>
											        <td>15101095085</td>
											        <td>湖北省 武汉市 武昌区</td>
											        <td>中南路中间广场b座1301</td>
											        <td class="color_red js_set">设置</td>
											        <td class="color_blue">
											        	<a href="javascript:void(0)" class="js_edit">编辑</a>
											        	<a href="javascript:void(0)" class="js_del">删除</a>   
											        </td>
											    </tr> -->
										    </tbody>
										</table>
									</div>
									<p style='text-align:center;padding:0.5rem 0;display:none;' id='loadingTips'>正在加载...</p>
								</div>
								<!--我的地址表格结束-->
							</div>	
							<!--我的地址结束-->
							
						</div>
					</div>
					<!-- 右边部分 end-->
				</div>
				<!-- pc 订单管理 end -->
			</div>
		</div>
	</div>
	<!--主题内容-->
	<!--foot-->
	<!-- <footer>
		<div class="container foot_bottom">
			<div class="row clearfix">
				<div class="col-sm-9 pad0 clearfix ">
					<figure class="col-xs-3 col-sm-12 pad0 clearfix">
						<p class="col-sm-2 pad0">购物指南<i class="fa fa-angle-right"></i> </p>
						<ul class="col-sm-10 pad0 foot_bottom_item">
							<li>
								<a href="javascript:void(0)">• 加盟会员</a>
							</li>
							<li>
								<a href="javascript:void(0)">• 购买流程  </a>
							</li>
							<li>
								<a href="javascript:void(0)">• 常见问题 </a>
							</li>
							<li>
								<a href="javascript:void(0)">• 联系客服</a>
							</li>
						</ul>
					</figure>
					<figure class="col-xs-3 col-sm-12 pad0 clearfix">
						<p class="col-sm-2 pad0">售后服务<i class="fa fa-angle-right"></i></p>
						<ul class="col-sm-10 pad0 foot_bottom_item">
							<li>
								<a href="javascript:void(0)">• 退换货政策</a>
							</li>
							<li>
								<a href="javascript:void(0)">• 退换货流程  </a>
							</li>
							<li>
								<a href="javascript:void(0)">• 退款说明 </a>
							</li>
							<li>
								<a href="javascript:void(0)">• 配送服务</a>
							</li>
						</ul>
					</figure>
					<figure class="col-xs-3 col-sm-12 pad0 clearfix">
						<p class="col-sm-2 pad0">走进极配<i class="fa fa-angle-right"></i></p>
						<ul class="col-sm-10 pad0 foot_bottom_item">
							<li>
								<a href="javascript:void(0)">• 关于极配</a>
							</li>
							<li>
								<a href="javascript:void(0)">• 联系方式  </a>
							</li>
						</ul>
					</figure>
					<figure class="col-xs-3 col-sm-12 pad0 clearfix">
						<p class="col-sm-2 pad0">支付方式<i class="fa fa-angle-right"></i></p>
						<ul class="col-sm-10 pad0 foot_bottom_item">
							<li>
								<a href="javascript:void(0)">• 在线支付 </a>
							</li>
							<li>
								<a href="javascript:void(0)">• 发票制度  </a>
							</li>
						</ul>
					</figure>
				</div>
				<div class="col-sm-3 pad0 foot_ewm ">
					<img src="images/ewm.jpg" alt="" />
				</div>
			</div>
		</div>
	</footer> -->
	<!--foot结束-->

	<!--新增修改地址弹框-->
	<div class="jd_tk" id="proment_new_address" style="display: none;">
		<div class="address_Bomb">
			<h3 class="address_Bomb_title">
				新增/修改
				<span class="close_page">
					<img src="${ctxWebStatic}/images/close.png" alt="" />
				</span>
			</h3>
			<form action="${ctxWeb}/myAddress/addPhoneSave" method="post" id="forms">
			<input name="id"  id="addrId" type="hidden"/>
			<div class="address_Bomb_info clearfix">
				<div class="address_Bomb_left col-sm-9 clearfix">
					<figure class="form-group clearfix">
						<label  class="col-sm-3 col-xs-5 fp_lable control-label ">
					    	收件人：
					    </label>
					    <div class="col-sm-8 col-xs-7 pad0">
					      	<input type="text" class="form-control" name="receive" id="receive" maxLength="20">
					    </div>
					     <span id="receSpan" style="color:red"></span>
					</figure>
					<figure class="form-group clearfix">
						<label  class="col-sm-3 col-xs-5 fp_lable control-label ">
					    	联系方式：
					    </label>
					    <div class="col-sm-8 col-xs-7 pad0">
					      	<input type="text" class="form-control" name="phone" id="phone">
					    </div>
					    <span id="phoneSpan" style="color:red"></span>
					</figure>
					<figure class="form-group clearfix">
						<label  class="col-sm-3 col-xs-5 fp_lable control-label ">
					    	所在地区：
					    </label>
					    <div class="col-sm-8 col-xs-7 pad0">
					      	<div data-toggle="distpicker"  class="tk_selcet"><!-- container -->									  	
								<select class="hy col-xs-12 col-sm-3 " data-province="省 " name="province" onchange="cityList()" id="province">
								<option value="">省</option>
								<c:forEach var="provinceList" items="${provinceList }">
								<option value="${provinceList.id }">${provinceList.name }</option>
								</c:forEach>
								</select>
								<select class="hy col-xs-12 col-sm-3 " data-city="市" name="city" id="city" onchange="areaList()">
								<option value="">市</option>
								</select>
								<select class="hy col-xs-12 col-sm-3 " data-district="区" name="area" id="area">
								<option value="">区</option>
								</select>
							</div>
					    </div>
					</figure>
					<figure class="form-group clearfix">
						<label  class="col-sm-3 col-xs-5 fp_lable control-label ">
					    	详细地址：
					    </label>
					    <div class="col-sm-8 col-xs-7 pad0">
					      	<input type="text" class="form-control" name="address" id="address" maxLength="50">
					    </div>
					    <span id="addressSpan" style="color:red"></span>
					</figure>
				</div>
				<div class="col-sm-3 default_left">
					<div class="default_box">
						<i class="search_chose"></i>
						<span>设为默认地址</span>
						<input  name='isDef' id="isDef" type="hidden" />
					</div>
					<div class='numRadio'style="display: none;" >
						<input type='checkbox' name="isD" id="isD"/>
					</div>
				</div>
			</div>
			</form>
			<div class=" shopping_car_price shopping_car_confirm">
				<a href="javascript:void(0)" onclick="subt()">确认</a>
			</div>
		</div>
	</div>
	<!--新增修改地址弹框结束-->
	<!--弹框-->
		<div class="jd_tk" id="del_tk" style="display: none;">
		    <div class="delet_box">
		        <div class="jd_win_tit">你确定删除该地址吗？</div>
		        <div class="jd_btn clearfix">
		            <a href="javascript:void(0)" class="cancle">取消</a>
		            <a href="javascript:void(0)" class="submit" onclick="confirmDelete()">确定</a>
		        </div>
		
		    </div>
		</div>
		
		<div class="jd_tk listSize"  style="display: none;">
		    <div class="delet_box">
		        <div class="jd_win_tit">最多只能有10条地址!</div>
		    </div>
		</div>
	<!--弹框结束-->
	</body>
	
</html>
